<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
<head>
	<title>首页</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="content">
	<input type="file" id="file" name="file" style="display: none;" />
	<section class="content-header">
		<h1>
			<i class="fa fa-dashboard"></i>
			<strong>部件层级</strong>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-home "></i>Home</a></li>
			<li>部件层级</li>
		</ol>
	</section>
	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-md-10">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">未绑定部件</h4>
					</div>
					<div class="box-body">
						<div class="form-inline">
							<div class="input-group">
								<input type="text" class="form-control" id="search"  placeholder="Search..."/>
								<span class="input-group-btn">
									<button type="button" name="search" class="btn btn-info searchBtn">查询</button>
									<button type="button" name="reset" id="reset" class="btn btn-info resetBtn">撤消</button>
								</span>
							</div>
							<button type="button" class="btn btn-info pull-right addBtn">绑定</button>
						</div>
					</div>
					<div class="box box-body">
						<table  id="dataTable" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
							<tr>
								<th width="7%" >序号</th>
								<th width="5%"><input type="checkbox" id="allNotBound"/></th>
								<th width="14%" >部件名称</th>
								<th width="14%" >生产厂家</th>
								<th width="10%" >生产日期</th>
								<th width="10%" >安装日期</th>
								<th width="10%" >所属区域</th>
								<th width="10%" >所属部件</th>
								<th width="10%" >状态</th>
								<th width="10%" >操作</th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
				
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">已绑定部件</h4>
					</div>
					<div class="box-body">
						<div class="form-inline">
							<div class="input-group">
								<input type="text" class="form-control" id="search2"  placeholder="Search..."/>
								<span class="input-group-btn">
									<button type="button" name="search" class="btn btn-info searchBtn2">查询</button>
									<button type="button" name="reset"  class="btn btn-info resetBtn2">撤消</button>
								</span>
							</div>
							<button type="button" class="btn btn-info pull-right deleteBtn">移除</button>
						</div>
					</div>
					<div class="box box-body">
						<table  id="dataTable2" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
							<tr>
								<th width="5%" >序号</th>
								<th width="2%"><input type="checkbox" id="allBound"/></th>
								<th width="9%" >部件名称</th>
								<th width="9%" >生产厂家</th>
								<th width="8%" >生产日期</th>
								<th width="8%" >安装日期</th>
								<th width="9%" >所属区域</th>
								<th width="9%" >所属部件</th>
								<th width="9%" >接口地址</th>
								<th width="9%" >接口端口</th>
								<th width="5%" >状态</th>
								<th width="8%" >操作</th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="col-md-2">
				<div class="box box-info" >
					<div class="box-header with-border">
						<h3 class="box-title"><i class="fa fa-cubes "></i><strong>部件层级</strong></h3>
					</div>
					<div class="box-body">
						<ul id="partTree" class="ztree"></ul>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	
	<!--绑定部件层级信息框-->
	<div class="modal" id="Modal">
		<div class="modal-dialog" role="dialog">
			<form id="modalForm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title"><strong>绑定信息</strong></h4>
					</div>
					<div class="modal-body">
						<input type="hidden" name="id" id="id" />
						<div class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-2 control-label">接口地址</label>
								<div class="col-sm-4">
									<div class="col-md-11">
										<input class="form-control" type="text" name="interfaceAddress" id="interfaceAddress" datatype="*,*1-100" nullmsg="请输入接口地址"/>
									</div>
									<div class="col-md-1">
										<span style="color:#F00;fontsize:30px">*</span>
									</div>
								</div>
								<label class="col-sm-2 control-label">接口端口</label>
								<div class="col-sm-4">
									<div class="col-md-11">
										<input class="form-control" type="text" name="interfacePort" id="interfacePort" datatype="*,*1-10" nullmsg="请输入接口端口" />
									</div>
									<div class="col-md-1">
										<span style="color:#F00;fontsize:30px">*</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary bindingBtn" >绑定</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">返回</button>

					</div>
				</div>
			</form>
		</div>
	</div>
	
	<div class="modal" id="editModal">
		<div class="modal-dialog" role="dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title"><strong>部件信息</strong></h4>
				</div>
				<div class="modal-body">
					<input type="hidden" name="partId" id="partId" />
					<div class="form-horizontal">
						<form id="editModalForm">
						<div class="form-group">
							<label class="col-sm-2 control-label">部件名称</label>
							<div class="col-sm-4">
								<div class="col-md-11">
									<input class="form-control" type="text" name="partName" id="partName" datatype="*,*1-100" nullmsg="请输入部件名称"/>
								</div>
								<div class="col-md-1">
									<span style="color:#F00;fontsize:30px">*</span>
								</div>
							</div>
							<label class="col-sm-2 control-label">生产厂家</label>
							<div class="col-sm-4">
								<div class="col-md-11">
									<input class="form-control" type="text" name="manufacturer" id="manufacturer" datatype="*,*1-100" nullmsg="请输入部件编码" />
								</div>
								<div class="col-md-1">
									<span style="color:#F00;fontsize:30px">*</span>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">生产日期</label>
							<div class="col-sm-4">
								<div class="col-md-11">
									<input class="form-control" type="date" name="productionTime" id="productionTime" datatype="*,*1-100" nullmsg="请输入生产日期" />
								</div>
								<div class="col-md-1">
									<span style="color:#F00;fontsize:30px">*</span>
								</div>
							</div>
							<label class="col-sm-2 control-label">安装日期</label>
							<div class="col-sm-4">
								<div class="col-md-11">
									<input class="form-control" type="date" name="installationTime" id="installationTime" datatype="*,*1-100" nullmsg="请输入安装日期" />
								</div>
								<div class="col-md-1">
									<span style="color:#F00;fontsize:30px">*</span>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">图标</label>
							<div class="col-sm-4">
								<div class="col-md-11">
									<label class="col-sm-12 left-label" style="padding-left: 0;"><a href="javascript: ;" id="fileclick"><img id="avatar"  src="" width="30px" height="30px"/></a></label>
								</div>
							</div>
							<label class="col-sm-2 control-label">部件状态</label>
							<div class="col-sm-4">
								<div class="col-md-11">
								<select class="form-control" name="state" id="state" style="width: 100%;" datatype="*,*1-100" nullmsg="请选择部件状态！">
										<option th:each="option:${options}" th:text="${option.title}" th:value="${option.id}"></option>
									</select>
								</div>
								<div class="col-md-1">
									<span style="color:#F00;fontsize:30px">*</span>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">设备编码</label>
							<div class="col-sm-4">
								<div class="col-md-11">
									<input class="form-control" type="text" name="deviceIdentify"
										id="deviceIdentify" datatype="*,*1-100" nullmsg="请输入设备编码" />
								</div>
								<div class="col-md-1">
									<span style="color: #F00; fontsize: 30px">*</span>
								</div>
							</div>
						</div>
						</form>
						<form id="videoModalForm">
						<div class="form-group hide-div" id="videoInfoDiv">
							<label class="col-sm-2 control-label">接口地址</label>
							<div class="col-sm-4">
								<div class="col-md-11">
									<input class="form-control hide-input" type="text" name="interfaceAddress1" id="interfaceAddress1" datatype="*,*1-100" nullmsg="请输入接口地址"/>
								</div>
								<div class="col-md-1">
									<span style="color:#F00;fontsize:30px">*</span>
								</div>
							</div>
							<label class="col-sm-2 control-label">接口端口</label>
							<div class="col-sm-4">
								<div class="col-md-11">
									<input class="form-control hide-input" type="text" name="interfacePort1" id="interfacePort1" datatype="*,*1-10" nullmsg="请输入接口端口" />
								</div>
								<div class="col-md-1">
									<span style="color:#F00;fontsize:30px">*</span>
								</div>
							</div>
						</div>
						</form>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary saveBtn" >保存</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">返回</button>

				</div>
			</div>
		</div>
	</div>
	<script th:src="@{/partBaseInfo/bindingpart.js}"></script>


</div>

</body>
</html>